<template>
    <!--题库中心-->
    <div class="contain">
        <div class="choose-box">
            <div class="type-choose" @click="handleChangeNav(1)">
                <span>章节测验</span>
                <i></i>
            </div>
            <div class="type-choose" @click="handleChangeNav(2)">
                <span>历年真题</span>
                <i></i>
            </div>
            <div class="type-choose" @click="handleChangeNav(3)">
                <span>智能选题</span>
                <i></i>
            </div>
        </div>
        <div class="main">
            <div class="page" v-show="navIndex === 1">
                <div class="contain-title">章节测验</div>
                <courseCatalog :courseId="course.id" :setting="settings"></courseCatalog>
            </div>
            <div class="page" v-show="navIndex === 2">
                <div class="contain-title">历年真题</div>
                <historyTestList :courseId="course.id"></historyTestList>
            </div>
            <div class="page" v-show="navIndex === 3">
                <div class="contain-title">智能选题</div>
                <chooseTestOpt :courseId="course.id"></chooseTestOpt>
            </div>
        </div>
        <!--<div class="no-data" v-if="course&&!course.id">-->
            <!--<span>暂无课程</span>-->
        <!--</div>-->
    </div>
</template>
<script>
import courseCatalog from '../../setting/comp/courseCatalog.vue'
import historyTestList from './historyTestList.vue'
import chooseTestOpt from './chooseTestOpt.vue'
export default {
    name: 'qACenter',
    components: {
        courseCatalog,
        historyTestList,
        chooseTestOpt
    },
    data() {
      return {
          navIndex: null,
          settings: {
              class: 'test',
              answerHistory: true,
              answer: true
          }
      };
    },
    props: {
        firstLab: Object,
        course: Object,
        tab: null
    },
    watch: {
        subject() {
            /*this.init()*/
        },
        course() {
            this.navIndex = this.navIndex || 1;
        },
        tab(val) {
            this.navIndex = Number(val);
        }
    },
    mounted() {
        console.log(this.tab);
        this.navIndex = Number(this.tab) || 1;
    },
    methods: {
        // 切换选项
        handleChangeNav(index) {
            this.navIndex = index
        }
    }
};
</script>
<style scoped lang="scss">
    .contain {
        .choose-box {
            display: flex;
            .type-choose {
                flex: 1;
                padding: 32px 15px 60px;
                margin-right: 20px;
                border-radius: 15px;
                box-shadow: 0 5px 10px rgba(222,222,222,0.3);
                transition-duration: 300ms;
                span {
                    font-size: 24px;
                    font-weight: bold;
                }
                &:first-child{
                    color: #a6d4ae;
                    background: url("../../../assets/image/back/u3792.png") no-repeat, #fff;
                    background-position: 80% 70%;
                }
                &:nth-child(2){
                    color: #f4c367;
                    background: url("../../../assets/image/back/u3793.png") no-repeat, #fff;
                    background-position: 80% 70%;
                }
                &:nth-child(3){
                    color: #f08e83;
                    background: url("../../../assets/image/back/u3794.png") no-repeat, #fff;
                    background-position: 80% 70%;
                }
                &:hover {
                    transform: translateY(-20px);
                }
            }

        }
        .main {
            padding: 30px 25px;
            .contain-title {
                border-left: 3px solid #007aff;
                padding: 5px 20px;
                line-height: 1;
                font-weight: bold;
                font-size: 14px;
                color: #333333;
            }
        }
        .no-data {
            padding: 30px;
            color: #999;
            font-size: 18px;
            text-align: center;
        }
    }
</style>
